<template>
  <div class="family-archive-page">
    <!-- 姓名搜索框 -->
    <div class="search-container">
      <el-input
        placeholder="请输入姓名"
        v-model="username"
        @keyup.enter="search"
        class="search-input"
      ></el-input>
      <el-button type="primary" @click="search" class="search-button">查询</el-button>
    </div>

    <!-- 没有找到结果时的提示 -->
    <div v-if="showInfo && noResults" class="info-container">
      <el-alert
        title="查无此人，请你重新输入名字或者查看是否有此人"
        type="error"
        show-icon
        :closable="false"
      />
    </div>

    <!-- 表格区域 -->
    <div v-if="showInfo && !noResults" class="info-container">
      <el-table
        :data="tableData"
        style="width: 100%"
      >
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="ID">
                <span>{{ props.row.userFamilyInfo.familyId }}</span>
              </el-form-item>
              <el-form-item label="姓名">
                <span>{{ props.row.username }}</span>
              </el-form-item>
              <el-form-item label="身份证号">
                <span>{{ props.row.userFamilyInfo.idCard }}</span>
              </el-form-item>
              <el-form-item label="就诊人关系">
                <el-input v-if="editMode && selectedRow === props.$index" v-model="editedRow.userFamilyInfo.relationship"></el-input>
                <span v-else>{{ props.row.userFamilyInfo.relationship }}</span>
              </el-form-item>
              <el-form-item label="社保卡">
                <span>{{ props.row.userFamilyInfo.socialSecurity }}</span>
              </el-form-item>
              <el-form-item label="性别">
                <span>{{ props.row.sex === '1' ? '男' : '女' }}</span>
              </el-form-item>
              <el-form-item label="出生年月">
                <span>{{ props.row.userFamilyInfo.birthday }}</span>
              </el-form-item>
              <el-form-item label="联系电话">
                <el-input v-if="editMode && selectedRow === props.$index" v-model="editedRow.phoneNumber"></el-input>
                <span v-else>{{ props.row.phoneNumber }}</span>
              </el-form-item>
              <el-form-item label="所在地区">
                <el-input v-if="editMode && selectedRow === props.$index" v-model="editedRow.shippingAddress"></el-input>
                <span v-else>{{ props.row.shippingAddress }}</span>
              </el-form-item>
              <el-form-item label="注册时间">
                <span>{{ props.row.registrationTime }}</span>
              </el-form-item>
              <el-button v-if="!editMode || selectedRow !== props.$index" @click="edit(props.$index)" class="edit-button">编辑</el-button>
              <el-button v-else @click="saveEdit(props.$index)" class="save-button">保存</el-button>
              <el-button @click="goBack" class="back-button">返回搜索</el-button>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column label="ID" prop="userId"></el-table-column>
        <el-table-column label="姓名" prop="username"></el-table-column>
        <el-table-column label="性别" prop="sex">
          <template slot-scope="scope">{{ scope.row.sex === '1'? '男' : '女' }}</template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { getFamilyInfo, editFamilyInfo } from '@/api/user_list/userFamilyInfo';

export default {
  data() {
    return {
      username: '',      // 姓名输入框的值
      showSearch: true,  // 控制搜索框显示
      showInfo: false,   // 控制信息显示
      personInfo: '',    // 存储查询到的姓名信息
      loading: false,    // 控制加载状态
      familyMembers: [], // 存储查询到的家庭成员信息
      editMode: false,   // 是否处于编辑模式
      selectedRow: -1,   // 当前选中编辑的行索引
      tableData: [],     // 存储查询到的家庭成员信息
      editedRow: null,   // 存储当前编辑行的数据
      noResults: false,  // 标记是否没有找到结果
    };
  },
  methods: {
    search() {
      if (this.username.trim() === '') {
        this.$message.error('请输入有效的姓名');
        return;
      }
      this.showInfo = true;      // 显示信息
      this.loading = true;       // 启动加载状态
      this.fetchPersonInfo();    // 查询姓名信息
    },

    fetchPersonInfo() {
      getFamilyInfo(this.username).then(response => {
        this.loading = false;   // 关闭加载状态
        if (response.data.length === 0) {
          this.noResults = true;  // 设置没有结果标志
          this.tableData = [];    // 清空表格数据
        } else {
          this.noResults = false; // 清除没有结果标志
          this.personInfo = response.data;
          this.tableData = response.data;
        }
      }).catch(() => {
        this.loading = false;   // 关闭加载状态
        this.$message.error('查询失败，请稍后再试');
        this.noResults = false; // 清除没有结果标志
        this.tableData = [];    // 清空表格数据
      });
    },

    goBack() {
      this.showInfo = false;   // 隐藏信息
      this.username = '';      // 清空输入框
      this.personInfo = '';    // 清空姓名信息
      this.editMode = false;   // 离开编辑模式
      this.selectedRow = -1;   // 取消选中的行
      this.noResults = false;  // 清除没有结果标志
    },

    edit(index) {
      this.editMode = true;
      this.selectedRow = index;
      this.editedRow = JSON.parse(JSON.stringify(this.tableData[index]));
    },

    saveEdit(index) {
      this.$set(this.tableData, index, this.editedRow);
      const updatedRow = this.tableData[index];
      editFamilyInfo(updatedRow).then(res => {
        this.$message.success('编辑成功');
        this.editMode = false;
        this.selectedRow = -1;
        this.editedRow = null; // 清空编辑行
      }).catch(() => {
        this.$message.error('编辑失败，请稍后再试');
      });
    },
  },
  created(){
    this.fetchPersonInfo();
  },

};
</script>

<style scoped>
/* 添加或调整样式以适应新的按钮 */
.edit-button, .save-button {
  margin-top: 20px;
}

.family-archive-page {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  flex-direction: column;
}

.search-container {
  text-align: center;
}

.search-input {
  width: 300px;
  margin-bottom: 20px;
}

.search-button {
  width: 100px;
}

.info-container {
  text-align: center;
  width: 100%;
}

.back-button {
  margin-top: 20px;
}

.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}

.el-alert {
  margin-bottom: 20px;
}
</style>
